Problem

The ContentFlow application was failing to deploy on Vercel with recurring errors due to hardcoded localhost:3001 URLs throughout the frontend components. These URLs work in development but are inaccessible in production environments, causing API calls to fail and breaking the entire application functionality.

Root Causes Identified

1. Hardcoded localhost URLs: 11+ occurrences across React components pointing to http://localhost:3001
2. Restrictive CORS configuration: API server only allowed localhost origins
3. Missing environment variable support: No dynamic API URL resolution for different environments
4. CSS build warnings: Incorrect @import statement order causing PostCSS warnings
5. Incomplete Vercel configuration: Missing environment variables in deployment configs

Solution

1. Centralized API Configuration

Created src/config/api.js with environment-aware URL resolution:

export const getApiBaseUrl = () => {
  if (import.meta.env.PROD) {
    return import.meta.env.VITE_API_BASE_URL || 'https://contentflow-api.vercel.app'
  }
  return import.meta.env.VITE_API_BASE_URL || 'http://localhost:3001'
}

2. Fixed All Hardcoded URLs

Replaced hardcoded localhost:3001 references with dynamic configuration in:

• SubscriptionManager.jsx - Payment and subscription endpoints
• AdminDashboard.jsx - Admin analytics and promotion management
• Dashboard.jsx - Content processing and history
• ContentHistory.jsx - Content retrieval and filtering
• PromoBanner.jsx - Promotion display and tracking

3. Production-Ready CORS Configuration

Updated api/server.js to accept multiple origins including production domains:

const allowedOrigins = [
  'http://localhost:5173', 
  'http://localhost:3000',
  'https://contentflow.vercel.app',
  'https://contentflow-frontend.vercel.app'
]

if (process.env.FRONTEND_URL) {
  allowedOrigins.push(process.env.FRONTEND_URL)
}

4. Enhanced Vercel Configuration

Updated both vercel.json files to include the new VITE_API_BASE_URL environment variable for proper frontend-to-API communication in production.

5. Fixed CSS Build Issues

Moved @import statements to the top of src/styles/viral-brand.css to eliminate PostCSS warnings during build.

Testing

• ✅ Clean builds with no warnings (npm run build)
• ✅ Development server runs correctly (npm run dev)
• ✅ All hardcoded URLs eliminated (verified with grep)
• ✅ Dynamic API URL resolution working in both environments

Deployment Instructions

A comprehensive deployment guide (VERCEL_DEPLOYMENT_GUIDE.md) has been added with step-by-step instructions for:

1. Deploying the API as a separate Vercel project
2. Deploying the frontend with proper environment variables
3. Configuring cross-origin communication between services

Impact

This fix resolves the recurring "SAME ERROR" deployment failures by implementing proper environment-based configuration. The application now supports seamless deployment to Vercel with dynamic API endpoint resolution and production-ready CORS policies.

💬 Share your feedback on Copilot coding agent for the chance to win a $200 gift card! Click here to start the survey.